<template>
  <div class="service-detail">
    <div class="title">
        <h3>服务详情</h3>
    </div>
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="ruleFormRef"
    >
        <p>居民信息</p>
        <el-form-item label="选择居民" >
            <span>{{formInline.name}}</span>
        </el-form-item>
        <el-form-item label="身份证号" >
            <span>{{formInline.idCard}}</span>
        </el-form-item>
        <el-form-item label="性别" >
            <span>{{formInline.sex}}</span>
        </el-form-item>
        <el-form-item label="出生年月" >
            <span>{{formInline.birthday}}</span>
        </el-form-item>
        <el-form-item label="练习电话" >
            <span>{{formInline.phone}}</span>
        </el-form-item>
        <el-form-item label="居住地" >
            <span>{{formInline.address}}</span>
        </el-form-item>
        <el-form-item label="居民标签" >
            <span>{{formInline.resident}}</span>
        </el-form-item>
        <!-- <el-form-item label="家庭成员">
            <el-input v-model="formInline.address" placeholder="请输入" />
        </el-form-item> -->
        <div class="hr"></div>
        <p>服务信息</p>
        <el-form-item label="服务编号">
            <span>{{formInline.id}}</span>
        </el-form-item>
        <el-form-item label="服务机构">
            <span>{{formInline.mechanism}}</span>
        </el-form-item>
        <el-form-item label="服务团队" >
            <span>{{formInline.team}}</span>
        </el-form-item>
        <el-form-item label="服务医生" >
            <span>{{formInline.doctor}}</span>
        </el-form-item>
        <el-form-item label="服务包" >
            <span>{{formInline.servicePackage}}</span>
        </el-form-item>
        <el-form-item label="服务项目" >
            <span>{{formInline.serviceItems}}</span>
        </el-form-item>
        <el-form-item label="服务地点">
            <span>{{formInline.place}}</span>
        </el-form-item>
        <el-form-item label="服务时间">
            <span>{{formInline.time}}</span>
        </el-form-item>
        <el-form-item label="服务备注">
            <span>{{formInline.remarks}}</span>
        </el-form-item>
        <div class="hr"></div>
        <el-form-item>
            <el-button type="primary" size="large" @click="onSubmit">编辑服务信息</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
    import { onMounted, reactive } from 'vue'
    import router from '../../router'

    let formInline = reactive({
        id: '',
        name: '',
        idCard: '',
        sex: '',
        birthday: '',
        phone: '',
        address: '',
        resident: '',
        mechanism: '',
        team: '',
        doctor: '',
        servicePackage: '',
        serviceItems: '',
        place: '',
        time: '',
        remarks: ''
    })
    function edit() {
        formInline = router.currentRoute.value.query
    }
    edit()
    const onSubmit = () => {
        console.log('formInline:', formInline);
        router.push({
            path: '/new-service',
            query: {
                id: formInline.id
            }
        })

    }
</script>

<style lang="less" scoped>
    .service-detail{
        background: #fff;
        padding: 20px;
        .title{
            padding-bottom: 25px;
            border-bottom: 1px #f2f7fb solid;
            h3{
                line-height: 20px;
                border-left: 6px #4d4dff solid;
                font-size: 18px;
                font-weight: normal;
                padding-left: 10px;
            }
        }
        p{
            font-size: 16px;
            line-height: 70px;
        }
        .hr{
            width: 100%;
            border-bottom: 1px #f2f7fb solid;
        }
        :deep(textarea){
            width: 576px;
            height: 120px;
        }
        button{
            margin-top: 20px;
        }
        .el-form-item{
            width: 206px;
        }
    }
</style>
